.piece {
  position: absolute;
  display: inline-block;
  cursor: pointer;

  .inner {
    width: 80%;
    height: 80%;
    display: inline-block;
    background: transparent;
    border-radius: 50%;
    margin: 10%;
    cursor: pointer;
  }

  .shadow {
    box-shadow: 1px 2px 3px #333, 0px 0px 8px #333 inset;
  }

  .red {
    background: indianred;
  }
  .red.marked, .red.marking, .red.deleting {
    border: solid 2px indianred;
  }

  .blue {
    background: royalblue;
  }
  .blue.marked, .blue.marking, .blue.deleting {
    border: solid 2px royalblue;
  }

  .activated {
    background: #ddd;
    border: solid 1px #fff;
  }

  .marked {
    background: #ddd;
    cursor: not-allowed;
  }

  .deleted {
    cursor: default;
  }

  .inner.marked:after {
    content: "";
    position: absolute;
    top: 10%;
    left: 55%;
    width: 10%;
    height: 100%;
    background: darkred;
    transform: rotate(45deg);
  }

  .inner.deleting, .inner.marking, .inner.moving-in {
    background: #ddd;
  }
  .inner.moving-in {
    border: solid 2px orange;
    cursor: pointer;
  }
  .moving{
    animation:zoom-in-out 1.5s linear 0s infinite normal;
  }
  @keyframes zoom-in-out {
    0%{ -ms-transform: scale(0.8); transform: scale(0.8); }
    50%{ -ms-transform: scale(1.1); transform: scale(1.1); }
    100%{ -ms-transform: scale(0.8); transform: scale(0.8); }
  }
}

.un-clickable {
  cursor: default;
}

